<template>
  <el-dialog :title="title" @close="cancelButton" :visible="dialogFormVisible">
    <el-form :model="form" :rules="rules" ref="addForm">
      <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
        <el-input
          v-model="form.name"
          autocomplete="off"
          style="width: 90%"
          placeholder="部门名称请输入1-50个字符"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门编码" :label-width="formLabelWidth" prop="code">
        <el-input
          v-model="form.code"
          autocomplete="off"
          style="width: 90%"
          placeholder="部门编码请输入1-50个字符"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="部门负责人"
        :label-width="formLabelWidth"
        prop="manager"
      >
        <el-select
          v-model="form.manager"
          placeholder="请选择部门负责人"
          style="width: 90%"
          @focus="getSimpleEmp"
        >
          <el-option
            v-for="item in simpleList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="部门介绍"
        :label-width="formLabelWidth"
        prop="introduce"
      >
        <el-input
          type="textarea"
          rows="5"
          v-model="form.introduce"
          autocomplete="off"
          style="width: 90%"
          resize="none"
          placeholder="部门介绍请输入1-300个字符"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelButton">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getDepartments,
  addDepartments,
  getDeptInfo,
  editDeptInfo,
} from "@/api/departments";
import { getSimpleEmp } from "@/api/employees";
export default {
  name: "addDepts",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    pid: {
      type: String,
      require: true,
    },
  },

  data() {
    //先获取id,id需要从tree-tool拿取,然后传给index,然后通过index传过来,
    //然后我们判断id和pid有没有相同的,如果有相同的就代表有子元素,然后遍历子元素,如果输入的value和子元素相等,那么就代表有相同的,这个时候就会报错,然后进行报错提示,没有的话就callback即可
    var validateName = async (rule, value, callback) => {
      let res = await getDepartments();
      console.log(res);
      //拿到这个部门的所有子元素
      //   .filter((item) => item.pid == this.pid)
      //拿到form的id,如果能拿到就代表这是一个编辑的页面,如果没有id 就代表是新增的页面
      if (this.form.id) {
        let list = res.data.depts.filter((item) => item.pid == this.form.pid);
        let repeat = list.some(
          (val) => val.name == value && val.name != this.oldFrom.name
        );

        repeat
          ? callback(new Error("不能存在相同的部门名称，请修改！"))
          : callback();
      } else {
        //1-首先获取当前点击新增的id,(因为点击新增部门,可能是新增这个部门的子部门)
        //2-然后获取所有部门的pid,找有没有和当前点击的id相同的pid.
        //3-如果有,就说明当前的部门是有子部门的,这个时候我们遍历当前的子部门,看看我们手动新增的部门名和其他的子部门名称是否有重复,如果有重复就代表这个名字不可用,进行提示修改
        //4-如果没有就代表通过,不进行提示
        res.data.depts
          .filter((item) => item.pid == this.pid)
          .forEach((val) => {
            if (val.name === value) {
              return callback(new Error("不能存在相同部门名称,请修改"));
            }
            callback();
          });
      }
    };
    var validateCode = async (rule, value, callback) => {
      let res = await getDepartments();
      let repeat;
      if (this.form.id) {
        //将所有的部门列表遍历,找到当code和输入的code 一样,并且找到的code和刚进页面的code不一样,就表示找到有相同的code,需要修改
        repeat = res.data.depts.some(
          (val) => val.code == value && val.code != this.oldFrom.code
        );
      } else {
        //获取所有部门的列表,
        //2-判断所有部门的code和我们输入的value,有相同的嘛?
        //3-如果有相同的报错,显示编码已经重复
        repeat = res.data.depts.some((val) => val.code == value);
      }
      repeat ? callback(new Error("部门编码已存在，不能重复！")) : callback();
    };
    return {
      //获取员工简单列表
      simpleList: [],
      //   dialogFormVisible: false,
      formLabelWidth: "120px",
      //   pid: "",
      //表单绑定数据
      form: {
        name: "", // 部门名称
        code: "", // 部门编码
        manager: "", // 部门管理者
        introduce: "", // 部门介绍
      },
      //获取旧表单
      oldFrom: {
        name: "",
        code: "",
      },
      //规则校验
      rules: {
        name: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "请输入1到50的字符长度",
            trigger: "blur",
          },
          { validator: validateName, trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入部门编码", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "请输入1到50的字符长度",
            trigger: "blur",
          },
          { validator: validateCode, trigger: "blur" },
        ],
        manager: [
          { required: true, message: "部门负责人不能为空", trigger: "blur" },
        ],
        introduce: [
          { required: true, message: "请输入部门介绍", trigger: "blur" },
          {
            min: 1,
            max: 300,
            message: "请输入1到300的字符长度",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //获取简单的员工信息
    async getSimpleEmp() {
      let res = await getSimpleEmp();
      //   console.log(res);
      this.simpleList = res.data;
      console.log(this.simpleList);
    },

    //获取部门的信息
    async getDeptInfo(id) {
      let res = await getDeptInfo(id);
      //   console.log(res);
      this.form = res.data;
      //将name和code保存起来,修改的时候不会被修改
      this.oldFrom.name = res.data.name;
      this.oldFrom.code = res.data.code;
    },
    //确定按钮
    save() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          if (this.form.id) {
            //调用编辑部门的接口,然后传参
            await editDeptInfo(this.form);
            this.$message.success("修改部门成功");
          } else {
            //调用新增部门的接口,然后传参
            await addDepartments({ ...this.form, pid: this.pid });
            //新增成功之后调用获取部门的接口,重新获取最新的数据
            this.$message.success("新增部门成功");
          }
          //调用获取部门列表函数
          this.$emit("getDep");
          //关闭表单
          this.$emit("update:dialogFormVisible", false);
          //清除表单的数据
          this.$refs.addForm.resetFields();
        }
      });
    },
    //取消按钮
    cancelButton() {
      //取消的时候清除掉form表单的所有数据
      this.$refs.addForm.resetFields();

      //将dialogFormVisible传给父元素,然后修改其值
      this.$emit("update:dialogFormVisible", false);
      //清空form
      this.form = "";
    },
  },
  computed: {
    //新增打开编辑页面是没有id的,但是编辑能获取到部门的所有信息是有id的,这个时候就需要判断,如果有form有id及时编辑部门,如果没有id就是新增部门
    title() {
      return this.form.id ? "编辑部门" : "新增部门";
    },
  },
};
</script>

 <style lang="scss">
.el-dialog__header {
  background-color: #409eff;
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__close {
    &::before {
      color: #fff;
    }
  }
}
</style>